<template>
  <el-dialog :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false" :close-on-press-escape='false'
             :before-close="cancel"
             title="设置定时发送" center>
    <div class="content">
      <p>选择时间：
        <el-date-picker size="small" @change="handleChange"
                        v-model="emailSendTiming" :picker-options="pickerOptions"
                        type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="定时发送时间">
        </el-date-picker>
      </p>
      <div class="error" v-show="error">最近可选择的时间为：{{this.target}}</div>
      <p>邮件将在北京时间: {{emailSendTiming}} 投递到对方邮箱</p>
    </div>
    <!-- 底部按钮-->
    <div slot="footer" class="dialog-footer" align="right">
      <el-button @click="cancel" size="mini">取 消</el-button>
      <el-button type="primary" size="mini" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
    import {nextOneHour} from '@/util/util'

    export default {
        name: "DialogTargetTime",
        data() {
            return {
                dialogVisible: false,
                emailSendTiming: '',
                target: '',
                pickerOptions: {
                    disabledDate: time => {
                        return time.getTime() < Date.now() - 8.64e7
                    }
                },
                error: false
            }
        },
        mounted(){
            this.emailSendTiming = nextOneHour(new Date().getTime())
        },
        methods: {
            initData(time){
                this.emailSendTiming = nextOneHour(new Date(time).getTime())
            },
            init() {
                this.target = nextOneHour(new Date().getTime());
                this.dialogVisible = true;
            },
            handleChange(val) {
                let time = new Date(val).getTime();
                // this.error = time < new Date(this.target).getTime()
            },
            submit() {
                // if(this.error)return;
                this.$emit('getRightTime',this.emailSendTiming)
                this.dialogVisible = false;
            },
            cancel(){
                this.dialogVisible = false;
                this.$emit('getRightTime','')
            }
        }
    }
</script>

<style scoped lang="scss">
  .content {
    margin: 25px 50px;
    font-size: 15px;
    color: #000;

    p {
      line-height: 35px;
    }

    p:last-child {
      color: #666;
      font-size: 14px;
    }

    .error {
      font-size: 12px;
      color: red;
      line-height: 22px;
      margin-left: 78px;
    }
  }
</style>
